<template>
  <view class="content" :class="{'active':active}">
    <!--发布-->
    <image class="logo" :class="{'active':active}" src="../../../static/logo.png"  mode="aspectFit"></image>
    <view class="tabbar-box-wrap">
      <view class="tabbar-box">
        <view class="tabbar-box-item" @click="goToPage('/pages/publish/roast')">
          <image class="box-image" src="../../static/img/release.png" mode="aspectFit"></image>
          <text class="explain">吐槽</text>
        </view>
        <view class="tabbar-box-item" @click="goToPage('/pages/publish/ask')">
          <image class="box-image" src="../../static/img/qa.png" mode="aspectFit"></image>
          <text class="explain">提问</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: false
    };
  },
  onLoad() {},
  onShow() {
    this.active = true;
  },
  onHide() {
    this.active = false;
  },
  methods: {
    goToPage(url) {
      if (!url) return;
      uni.navigateTo({
        url
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* #ifdef H5 */
  height: calc(100vh - var(--window-bottom) - var(--window-top));
  /* #endif */
  /* #ifndef H5 */
  height: 100vh;
  /* #endif */
  transition: opacity 0.3s;
  background: #999;
  opacity: 0;
  &.active {
    opacity: 1;
  }
  .logo {
    position: relative;
    margin-top: -400upx;
    width: 200upx;
    height: 200upx;
    // z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    &.active {
      opacity: 1;
    }
  }
}
.tabbar-box-wrap {
  position: absolute;
  width: 100%;
  padding: 50upx;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  .tabbar-box {
    position: relative;
    display: flex;
    width: 100%;
    background: #fff;
    border-radius: 20upx;
    padding: 15upx 20upx;
    box-sizing: border-box;
    z-index: 2;
    box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
    &:after {
      content: '';
      position: absolute;
      bottom: -16upx;
      left: 0;
      right: 0;
      margin: auto;
      width: 50upx;
      height: 50upx;
      transform: rotate(45deg);
      background: #fff;
      z-index: 1;
      box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
    }
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 20upx;
      z-index: 2;
    }
    .tabbar-box-item {
      // position: relative;
      width: 100%;
      z-index: 3;
      margin: 10upx;
      color: $uni-color-subtitle;
      text-align: center;
      font-size: $uni-font-size-base;
      .box-image {
        width: 100%;
        height: $uni-img-size-lg;
      }
    }
  }
}
</style>
